<template>
  <div class="block">
    <el-date-picker
        v-model="attendanceData"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="YYYYMMDD"
    />
    <el-select v-model="isNormal" placeholder="考勤状态" style="width: 240px">
      <el-option v-for = "(itemValue, itemKey) in ATTENDANCE_STATUS" :key="itemKey" :label="itemValue" :value="itemKey" />
    </el-select>
      <el-select v-model="abnormalType" placeholder="异常类型" style="width: 240px">
        <el-option v-for="(value, key) in sysDictStore.ABNORMAL_TYPE" key={{key}} :label="value" :value="parseInt(key)" />
      </el-select>
    <el-button type="primary" @click="showAttendanceInfo">查询</el-button>
  </div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="attend_date" label="日期" width="100" />
    <el-table-column fixed="right" label="考勤情况" min-width="90">
      <template #default="scope">{{ ATTENDANCE_STATUS[scope.row.is_normal===true ? 1 : 0]!==undefined ? ATTENDANCE_STATUS[scope.row.is_normal===true ? 1 : 0] : '其他'}}</template>
    </el-table-column>
    <el-table-column fixed="right" label="异常类型" min-width="120">
      <template #default="scope">{{ sysDictStore.ABNORMAL_TYPE[scope.row.abnormal_type]!==undefined ? sysDictStore.ABNORMAL_TYPE[scope.row.abnormal_type] : '其他'}}</template>
    </el-table-column>
    <el-table-column prop="remark" fixed="right" label="备注" min-width="350"/>
  </el-table>
  <div class="page-container">
    <PageSelect
        :pageInfo="pageDetailInfo"
        :totalCount="totalCount"
        @update:pageInfo="handlePageInfoUpdate"
    />
  </div>
</template>

<script  setup>
import {ref, watch} from "vue";

import {getAttendanceByDateIntervalAPI} from "@/network/attendance/attendance";
import {ElMessage} from "element-plus";
import PageSelect from "@/components/common/PageSelect.vue";
import {useSysDictStore} from "@/store/store-sys-dict-pinia";
import {SYS_DICT} from "@/dict/dict-sys";
import {ATTENDANCE_STATUS} from "@/dict/dict-attendance";
import EventBus from "@/plugins/event-bus";

const sysDictStore = useSysDictStore();
sysDictStore.getSysDict([SYS_DICT.ABNORMAL_TYPE]);




const attendanceData = ref()
const isNormal = ref()
const abnormalType = ref()
const studentId = ref()
const tableData = ref([])


const pageDetailInfo = ref({
  currentPage: 1,
  pageSize: 10,
})

const totalCount = ref(0);

EventBus.on("show-student-attendanceDetail-info-event",(eventData)=>{
  studentId.value=eventData.studentId
})

const handlePageInfoUpdate = () => {
  showAttendanceInfo()
};

const showAttendanceInfo = () => {
  const data = {
    query_base:{
      skip: pageDetailInfo.value.currentPage,
      limit: pageDetailInfo.value.pageSize,
    },
    attend_date_begin: attendanceData.value[0],
    attend_date_end: attendanceData.value[1],
    student_id: studentId.value,
    is_normal: isNormal.value,
    abnormal_type:abnormalType.value
  }
  getAttendanceByDateIntervalAPI(data).then(res => {
    if (res.data.code !== 0) {
      ElMessage.error(res.data.message)
    }
    else {
      totalCount.value = res.data.total_count
      tableData.value = res.data.data
    }

  })
}

</script>

<style>
</style>